<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> New Document </title>
</head>

<body>
<a href="#" onmousemove="c$.mmove(this,'提示信息');" onmouseout="c$.mout();">
    <span style="font-size:50px;font-weight:bold;color:blue;text-decoration:underline;">分析达瓦大哇大大多哇大无大无多 </span>
</a>

<script>
    var c$={};
    // 拿到提示信息
    var w$=function(s){document.write(s);}
    //console.log(w$); // ƒ (s){document.write(s);}

    // 拿到 div 的操作对象
    var o$=function(id){return document.getElementById(id);}
    //console.log(o$);    //ƒ (id){return document.getElementById(id);}

    w$("<div id=\"ts\" style=\"font-weight:bold;position:absolute;background-color:#FFFFE6;font-size: 12px;padding: 3px; border: 1px solid #FFCC99;display:none\"></div>");

    c$.mmove=function(o,s){
        //console.log(o); // o : a标签
//alert(typeof(s));
        var evtent=event||window.event;  //兼容老版本浏览器的事件对象
        var x=evtent.clientX+5; //返回鼠标在窗口客户区域中的X坐标 只读
        var y=evtent.clientY+20; //返回鼠标在窗口客户区域中的Y坐标 只读
        o$("ts").style.left=x+"px";//拼接
        o$("ts").style.top=y+"px";

        if(s===""||typeof(s)=="undefined"){
            o$("ts").innerHTML=o.innerHTML;
        }else{
            o$("ts").innerHTML=s
        }
        o$("ts").style.display="";
    }
    c$.mout=function(){
        o$("ts").style.display="none";
    }
</script>
<br/>
<a href="#" id="link" style="font-size:50px;font-weight:bold">但我点我点我点我点我</a>

<script type="text/javascript">
    //超链接提示文字并且随鼠标移动
    //创建 div块 : 提示信息的载体
    let promptMessage = document.createElement('div');
    promptMessage.innerHTML = '这是文本提示信息';
    //样式
    promptMessage.style.background = 'skyblue';
    promptMessage.style.fontFamily = 'Helvetica';
    promptMessage.style.fontSize = '10px';
    promptMessage.style.display = 'inline-block';
    promptMessage.style.border = '1px solid red';
    promptMessage.style.padding = '4px';
    promptMessage.style.borderRadius = '10px';
    promptMessage.style.position = 'absolute';

    let o = document.getElementById('link');

    /*
event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。
event对象只在事件发生的过程中才有效。
event的某些属性只对特定的事件有意义。
比如，fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。
    */
    //为 id 为link的超链接添加 鼠标移动事件 即随鼠标移动提示信息
    o.onmousemove = function (event) { // event 事件对象 由系统调用
        // 绑定的是鼠标移动事件,每移动就会获取鼠标位置
        let x = event.clientX ;
        let y = event.clientY ;
        //将获取到的x y 设置给div 的 left top
        promptMessage.style.left = x + 10 + 'px';  //添加偏移量 否则离鼠标太近
        promptMessage.style.top = y + 8 + 'px';
        //添加一个孩子节点 且是一个div  且随着鼠标移动(实时获取了鼠标的位置)
        document.body.appendChild(promptMessage);
    }
    //离开 移除提示信息
    o.onmouseout = function () {
        document.body.removeChild(promptMessage);
    };
</script>

</body>
</html>
